사용자 입력 폼을 개발할 때 주의해야 할 것들
2023년 10월 25일 · #팁
각 폼이 필수 값인지, 최대값, 최대길이, 최소값, 최소길이는 얼마나 돼야 하는지. 값의 타입이 무엇인지. 숫자의 경우 소수점이나 음수 입력을 허용할지 말지 등을 고려하자. validation 은 기획단에서 고려 되어야 할 사항이지만, 기획자가 놓칠 수 있다.
기본적으로 input 태그의 event.target.value 값의 타입은 string 이다. type=number 로 설정 되어있다고 하더라도 말이다. 그렇다보니 API 요청시 숫자로 보내야 할 값을 문자열로 보내는 것은 흔한 실수이다. 이것을 주의하자.
모바일에서 숫자 input 을 열었을 때 숫자 키보드를 보여주고 싶을 수 있다. type=number 속성을 부여했다 하더라도 iOS 에서는 일반 자판이 나온다. 숫자 키패드를 소환하려면 pattern='\d*' 속성을 추가해준다.
<input type='number' pattern='\d*' />사용자가 input 내용에 처음 또는 끝부분에 공백을 넣는 경우가 생각보다 많이 있다. 패스워드나 이메일등을 어디선가 복사-붙여넣기 했을 때 공백이 따라 붙는 경우가 많다. 이 경우 이메일 또는 비번 등이 틀렸다고 에러 메시지가 출력 될 것이다.
닉네임을 만들 때는 심지어 그냥 공백만으로 닉네임은 만드는 사람도 있다. " " <- 이렇게.
이런 상황에 대비하기 위해 value.trim(); 메소드를 사용해 볼 수 있다.
주의할 점, onChange() 함수가 value를 업데이트할 때 trim() 을 처리하게 되면, 띄어쓰기 조차 할 수 없게 되므로, trim() 메소드는 hangleSubmit 함수에서 처리 하도록 하자.